import React, { Component } from 'react'
import { withRouter, Link } from 'react-router-dom'
import queryString from 'query-string'
import ask from '../../../serve/api'
import placeholder from './../../../images/placeholder.jpg'
import styles from './ListContainer.module.scss'


export default withRouter(class ListContainer extends Component {

  constructor(props){
    super();
    const {location} = props;
    const oSearch = queryString.parse(location.search);
    this.state = {
      orgId : oSearch.orgId,
      model_org : {
        list : [],
      },
      model_dynamic : {
        list : [],
      },
      model_project : {
        list : [],
      },
      model_result : {
        list : [],
      },
      model_publish: {
        list: [],
      },
      model_leader: {
        list: [],
      },
      model_orgJg: {
        list: [],
      }
    }
  }
  
  componentDidMount() {

    // 机构列表
    this.fetchModelListData({ api: 'listOrg' });
    // 项目列表
    this.fetchModelListData({ api: 'listOrgProject', params: { orgId: this.state.orgId, page: 1, pageSize: 4 } });
    // 成果列表
    this.fetchModelListData({ api: 'listOrgResult', params: { orgId: this.state.orgId, page: 1, pageSize: 4 } });
    // 出版物列表
    this.fetchModelListData({ api: 'listOrgPublish', params : {orgId : this.state.orgId, page:1, pageSize: 4}});    
    // 领导列表
    this.fetchModelListData({ api: 'listOrgLeader', params: { orgId: this.state.orgId, page: 1, pageSize: 10 } });    
    // 机构列表
    this.fetchModelListData({ api: 'listOrgJg', params: { orgId: this.state.orgId, page: 1, pageSize: 10 } });    
    
  }


  async fetchModelListData({api, params}){
    const { code, result } = await ask[api](params);
    try {
      if (code !== '000000') {
        throw new Error('数据出错');
      };
      
      this.setData(api,result);

    } catch (error) {
      console.log(error);
    }
  }

  setData = (api, result)=>{
    const {
      model_org,
      model_project,
      model_dynamic,
      model_result,
      model_publish,
      model_leader,
      model_orgJg,
    } = this.state;
    switch (api) {
      case 'listOrg':
        model_org.list = result || [];
        break;
      case 'listOrgProject':
        model_project.list = result || [];
        break;
      case 'listOrgDynamic':
        model_dynamic.list = result || [];
        break;
      case 'listOrgResult' :
        model_result.list = result || [];
        break;
      case 'listOrgPublish':
        model_publish.list = result || [];
        break;
      case 'listOrgLeader':
        model_leader.list = result || [];
        break;
      case 'listOrgJg':
        model_orgJg.list = result || [];
        break;
        default:
        break;
      }
      this.setState({
        model_org,
        model_project,
        model_result,
        model_publish,
        model_leader,
        model_orgJg,
      });
  }

  onLeaderMore() {

  }

  render() {
    const {
      orgId,
      model_org,
      model_project,
      model_result,
      model_publish,
      model_leader,
      model_orgJg,
    } = this.state;

    const currentOrg = model_org.list.filter(item => item.id+'' === orgId )[0] || {};

    return (
      <div className={styles.list_container}>
        <div className={styles.left}>
          <div className={styles.project}>
            <div className={styles.content}>
              <img src={placeholder} alt=""/>
              {!!model_project.list.length && (
                <ul>
                  {model_project.list.map((item, index) => {
                    return (
                      <li key={index}>
                        <h2><Link to={`/org/project/pageDetail/${item.id}?orgId=${orgId}`} title={item.title}>{item.title}</Link></h2>
                        {/* <h2 title={item.title}>{item.title}</h2> */}
                        {index === 0 && <div className={styles.detail}>
                          <i dangerouslySetInnerHTML={{ __html: item.content }}></i>
                          {/* <span className={styles.span}><a>【详情】</a></span> */}
                          <span className={styles.span}><Link to={`/org/project/pageDetail/${item.id}?orgId=${orgId}`}>【详情】</Link></span>
                        </div>}
                      </li>
                    )
                  })}
                </ul>
              )}
              {!model_project.list.length && <p style={{ textAlgin: 'left' }}>暂无数据！</p>}
            </div>
            <div className={styles.title}>研究项目</div>
            <Link className={styles.more} to={`/org/project?orgId=${orgId}`}>【更多】</Link>
            {/* <div className={styles.more} onClick={() => this.onLeaderMore()}>【更多】</div> */}
          </div>
          <div className={styles.project}>
            <div className={styles.content}>
              <img src={placeholder} alt=""/>
              { !!model_result.list.length && (
                <ul>
                  {model_result.list.map((item, index) => {
                    return (
                      <li key={index}>
                        {/* <span>{item.title}</span> */}
                        <h2><Link to={`/org/result/pageDetail/${item.id}?orgId=${orgId}`} title={item.title}>{item.title}</Link></h2>
                        {index === 0 && <div className={styles.detail}>
                          <i dangerouslySetInnerHTML={{ __html: item.content }}></i>
                          <span className={styles.span}><Link to={`/org/result/pageDetail/${item.id}?orgId=${orgId}`}>【详情】</Link></span>
                        </div>}
                      </li>
                    )
                  })}
                </ul>
              ) }
              { !model_result.list.length && <p style={{textAlgin:'left'}}>暂无数据！</p> }
            </div>
            <div className={styles.title}>研究成果</div>
            <Link className={styles.more} to={`/org/result?orgId=${orgId}`}>【更多】</Link>
          </div>
          <div className={styles.project} style={{ margin: 0 }}>
            <div className={styles.content}>
              <img src={placeholder} alt=""/>
              {!!model_publish.list.length && (
                <ul>
                  {model_publish.list.map((item, index) => {
                    return (
                      <li key={index}>
                        {/* <span>{item.title}</span> */}
                        <h2><Link to={`/org/publish/pageDetail/${item.id}?orgId=${orgId}`} title={item.title}>{item.title}</Link></h2>
                        {index === 0 && <div className={styles.detail}>
                          <i dangerouslySetInnerHTML={{ __html: item.content }}></i>
                          <span className={styles.span}><Link to={`/org/publish/pageDetail/${item.id}?orgId=${orgId}`}>【详情】</Link></span>
                        </div>}
                      </li>
                    )
                  })}
                </ul>
              )}
              {!model_publish.list.length && <p style={{ textAlgin: 'left' }}>暂无数据！</p>}
            </div>
            <div className={styles.title}>出版物</div>
            <Link className={styles.more} to={`/org/publish?orgId=${orgId}`}>【更多】</Link>
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.leader}>
            <div className={styles.name_list}>
              {model_leader.list.map((item, index) => {
                  return (
                    <span key={index}>{item.name}<span className={styles.job}>{item.position}</span></span>
                  )
              })}
            </div>
            <div className={styles.title}>单位领导</div>
            <Link className={styles.more} to={`/org/info?orgId=${orgId}&id=1`}>【更多】</Link>
          </div>
          <div className={styles.info}>
            <div className={styles.info_detail}>
              {currentOrg.about}
              <span><Link to={`/org/info?id=0&orgId=${orgId}`}>【详情】</Link></span>
            </div>
            <div className={styles.title}>单位简介</div>
            <Link className={styles.more} to={`/org/info?orgId=${orgId}&id=0`}>【更多】</Link>
          </div>
          <div className={styles.info}>
            <div className={styles.info_detail}>
              <ul>
                {model_orgJg.list.map((item, index) => {
                  return (
                    <li key={index}>{item.name}</li>
                  )
                })}
              </ul>
            </div>
            <div className={styles.title}>机构设置</div>
            <Link className={styles.more} to={`/org/info?orgId=${orgId}&id=2`}>【更多】</Link>
          </div>
          <div className={styles.info} style={{ margin: 0 }}>
            <div className={styles.contact}>
              <span>联系电话: {currentOrg.telephone}</span>
              <span>传真: {currentOrg.fax}</span>
              <span>联系地址: {currentOrg.address}</span>
              <span>网址: {currentOrg.url}</span>
            </div>
            <div className={styles.title}>联系我们</div>
            {/* <div className={styles.more} onClick={() => this.onLeaderMore()}></div> */}
          </div>
        </div>
      </div>
    )
  }
})
